<template>
  <div class="positionUser-page">
    <MainHead title="网格情况"
              @change="getPageList()" />
    <el-card class="main-card"
             shadow="never"
             v-loading="loading">
      <div class="search">
        <div>
          <el-button type="primary"
                     icon="el-icon-plus"
                     @click="openMadel(1)">新增</el-button>
          <el-button @click="publicDeleteBatch">删除</el-button>
        </div>
        <div>
          <el-input style="width: 264px; margin-right: 10px"
                    placeholder="请输入关键字"
                    prefix-icon="el-icon-search"
                    v-model="formData.keyword"></el-input>
          <el-button type="primary"
                     @click="getPageList()">搜索</el-button>
          <Search :config="searchConfig"
                  @change="searchChange"
                  style="margin-left: 10px" />
        </div>
      </div>
      <el-table :data="tableData"
                style="width: 100%"
                class="page-table"
                height="calc(100vh - 65px - 60px - 30px - 172px - 119px)"
                @selection-change="publicSelectionChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index"
                         label="序号"
                         width="110"></el-table-column>
        <el-table-column prop="gridName"
                         label="网格名称"></el-table-column>
        <el-table-column prop="gridLevel"
                         label="网格评级">
          <template slot-scope="{row}">
            <div :style="`color:${gridLevel[row.gridLevel].color}`">{{gridLevel[row.gridLevel].name}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="partyMemberNumber"
                         label="党员数"></el-table-column>
        <el-table-column prop="registeredPopulationNumber"
                         label="户籍人数"></el-table-column>
        <el-table-column prop="statisticsYear"
                         label="年份"></el-table-column>
        <el-table-column label="操作"
                         width="110">
          <template slot-scope="{row}">
            <el-dropdown placement="top"
                         @command="handleCommand($event, row)">
              <el-button style="padding: 0"
                         type="text">操作</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="view">查看详情</el-dropdown-item>
                <el-dropdown-item command="edit">编辑</el-dropdown-item>
                <el-dropdown-item command="delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer-page">
        <Page v-model="pageInfo"
              @change="getPageList()" />
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogFormVisible"
               :title='title'>
      <Form ref="form"
            :type='type'
            :key='Formkey'
            :madelId='madelId'
            @colMalde='colMalde'
            @getdata='getPageList' />
      <div slot="footer"
           class="dialog-footer">
        <el-button style="color: #d03539; border-color: #d03539; padding: 12px 27px"
                   @click="dialogFormVisible= false">取消</el-button>
        <el-button v-if="type !== 3"
                   style="padding: 12px 27px"
                   type="primary"
                   @click="submit()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { minxi } from '../../../../mixin/index'
import Page from '@/components/Page'
import Form from './Form.vue'
export default {
  mixins: [minxi],
  data () {
    return {
      Formkey: false,
      title: '新增',
      type: 1,
      dialogFormVisible: false,
      formData: {
      },
      gridLevel: [
        {
          name: '',
          color: ''
        },
        {
          name: '优秀',
          color: 'green'
        },
        {
          name: '平稳',
          color: 'yellow'
        },
        {
          name: '较差',
          color: 'red'
        }
      ],
      tableData: [],
      searchConfig: {
        gridName: {
          name: "网格名称",
          type: "input",
          placeholder: "请输入网格名称",
          value: ''
        },
        gridLevel: {
          name: "网格评级",
          type: "select",
          placeholder: "请输入网格评级",
          value: null,
          data: [
            {
              value: 1,
              label: '优秀'
            },
            {
              value: 2,
              label: '平稳'
            },
            {
              value: 3,
              label: '较差'
            }
          ]
        }
      },
      pageInfo: { // 分页基础参数
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      action: {
        removeDataByKey: '/ruralGridDistribution/',
        deletes: '/ruralGridDistribution/'
      },
      searchForm: {},
      idName: 'id',
      pageListName: 'getPageList',
      madelId: '',
      loading: true
    }
  },
  created () {
    this.getPageList()
  },
  methods: {
    submit () {
      this.$refs.form.submit()
    },
    colMalde () {
      this.dialogFormVisible = false
    },
    openMadel (type, row = null) {
      const nameList = ['', '新增', '修改', '查询']
      row && row.id && (this.madelId = row.id)
      this.title = nameList[type]
      this.type = type
      this.dialogFormVisible = true
    },
    getPageList () {
      this.loading = true
      const { pageNo, pageSize } = this.pageInfo
      this.$Ajax(
        "/ruralGridDistribution/page",
        "post",
        {
          pageNum: pageNo,
          pageSize: pageSize,
          ...this.formData,
          ...this.searchForm
        },
        (res) => {
          this.tableData = res.data.list
          this.pageInfo.total = res.data.total
          this.loading = false
        }
      )
    },
    searchChange (search) {
      this.searchForm = search
      this.pageInfo.pageNo = 1
      this.getPageList()
    },
    handleCommand (command, row) {
      const op = {
        delete: () => {
          this.publicDelete(row)
        },
        edit: () => {
          this.openMadel(2, row)
        },
        view: () => {
          this.openMadel(3, row)
        }
      }
      op[command]()
    }
  },
  components: {
    Page,
    Form
  },
  filters: {
    gridLevelName (value) {
      const gridLevelName = ['', '优秀', '平稳', '较差']
      return gridLevelName[value]
    }
  },
  watch: {
    dialogFormVisible (newvalue) {
      newvalue && (this.Formkey = !this.Formkey)
    }
  }
}
</script>
 
<style lang="scss" scoped='scoped'>
@import "@/assets/style/element-variables.scss";
.divider {
  margin-top: 0px;
}
/deep/.el-dialog__body {
  padding-top: 24px;
  padding-bottom: 24px;
}
/deep/.el-dialog__header {
  border-bottom: 1px solid #d9d9d9;
}
/deep/.el-dialog__footer {
  border-top: 1px solid #d9d9d9;
}
/deep/.el-dialog__title {
  font-weight: 700;
}
.dialog-footer {
  text-align: right;
}
</style>